<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Hugo 0.68.3 with theme Tranquilpeak 0.4.7-BETA">
<meta name="author" content="唐宋缘明卿">
<meta name="keywords" content=", development, next-gen">
<meta name="description" content="This post is used to show how tag plugins are displayed. See docs for more info.">


<meta property="og:description" content="This post is used to show how tag plugins are displayed. See docs for more info.">
<meta property="og:type" content="article">
<meta property="og:title" content="Tags plugins showcase">
<meta name="twitter:title" content="Tags plugins showcase">
<meta property="og:url" content="https://gaohaihang.gitee.io/ghhs_technology_blog/2014/10/tags-plugins-showcase/">
<meta property="twitter:url" content="https://gaohaihang.gitee.io/ghhs_technology_blog/2014/10/tags-plugins-showcase/">
<meta property="og:site_name" content="唐宋缘明卿的博客">
<meta property="og:description" content="This post is used to show how tag plugins are displayed. See docs for more info.">
<meta name="twitter:description" content="This post is used to show how tag plugins are displayed. See docs for more info.">
<meta property="og:locale" content="zh-cn">

  
    <meta property="article:published_time" content="2014-10-29T00:00:00">
  
  
    <meta property="article:modified_time" content="2014-10-29T00:00:00">
  
  
  
  
    
      <meta property="article:tag" content="tag plugins">
    
      <meta property="article:tag" content="test">
    
  


<meta name="twitter:card" content="summary">







  <meta property="og:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-6-140.jpg">
  <meta property="twitter:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-6-140.jpg">





  <meta property="og:image" content="http://img.qq22.com.cn/uploads/4134/gubtyqxfhz2.jpg?68513786">
  <meta property="twitter:image" content="http://img.qq22.com.cn/uploads/4134/gubtyqxfhz2.jpg?68513786">


    <title>Tags plugins showcase</title>

    <link rel="icon" href="https://gaohaihang.gitee.io/ghhs_technology_blog/favicon.png">
    

    

    <link rel="canonical" href="https://gaohaihang.gitee.io/ghhs_technology_blog/2014/10/tags-plugins-showcase/">

    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.min.css" integrity="sha256-vuXZ9LGmmwtjqFX1F+EKin1ThZMub58gKULUyf0qECk=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/helpers/jquery.fancybox-thumbs.min.css" integrity="sha256-SEa4XYAHihTcEP1f5gARTB2K26Uk8PsndQYHQC1f4jU=" crossorigin="anonymous" />
    
    
    <link rel="stylesheet" href="https://gaohaihang.gitee.io/ghhs_technology_blog/css/style-twzjdbqhmnnacqs0pwwdzcdbt8yhv8giawvjqjmyfoqnvazl0dalmnhdkvp7.min.css" />
    
    

    
      
    
    
  </head>

  <body>
    <div id="blog">
      <header id="header" data-behavior="5">
  <i id="btn-open-sidebar" class="fa fa-lg fa-bars"></i>
  <div class="header-title">
    <a class="header-title-link" href="https://gaohaihang.gitee.io/ghhs_technology_blog/">唐宋缘明卿的博客</a>
  </div>
  
    
      <a class="header-right-picture "
         href="https://gaohaihang.gitee.io/ghhs_technology_blog/#about">
    
    
    
      
        <img class="header-picture" src="http://img.qq22.com.cn/uploads/4134/gubtyqxfhz2.jpg?68513786" alt="作者的图片" />
      
    
    </a>
  
</header>

      <nav id="sidebar" data-behavior="5">
  <div class="sidebar-container">
    
      <div class="sidebar-profile">
        <a href="https://gaohaihang.gitee.io/ghhs_technology_blog/#about">
          <img class="sidebar-profile-picture" src="http://img.qq22.com.cn/uploads/4134/gubtyqxfhz2.jpg?68513786" alt="作者的图片" />
        </a>
        <h4 class="sidebar-profile-name">唐宋缘明卿</h4>
        
          <h5 class="sidebar-profile-bio">弱小的人，才习惯嘲讽与否定；内心强大的人，从不吝啬赞美与鼓励。</h5>
        
      </div>
    
    <ul class="sidebar-buttons">
      
  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://gaohaihang.gitee.io/ghhs_technology_blog/">
    
      <i class="sidebar-button-icon fa fa-lg fa-home"></i>
      
      <span class="sidebar-button-desc">首页</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://gaohaihang.gitee.io/ghhs_technology_blog/categories">
    
      <i class="sidebar-button-icon fa fa-lg fa-bookmark"></i>
      
      <span class="sidebar-button-desc">分类</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://gaohaihang.gitee.io/ghhs_technology_blog/tags">
    
      <i class="sidebar-button-icon fa fa-lg fa-tags"></i>
      
      <span class="sidebar-button-desc">标签</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://gaohaihang.gitee.io/ghhs_technology_blog/archives">
    
      <i class="sidebar-button-icon fa fa-lg fa-archive"></i>
      
      <span class="sidebar-button-desc">归档</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://gaohaihang.gitee.io/ghhs_technology_blog/resume">
    
      <i class="sidebar-button-icon fa fa-address-card"></i>
      
      <span class="sidebar-button-desc">Resume</span>
    </a>
  </li>


    </ul>
    <ul class="sidebar-buttons">
      
  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://github.com/ghh617415200" target="_blank" rel="noopener">
    
      <i class="sidebar-button-icon fa fa-lg fa-github"></i>
      
      <span class="sidebar-button-desc">GitHub</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://stackoverflow.com/users/13559927/ghh-cirs" target="_blank" rel="noopener">
    
      <i class="sidebar-button-icon fa fa-lg fa-stack-overflow"></i>
      
      <span class="sidebar-button-desc">Stack Overflow</span>
    </a>
  </li>


    </ul>
    <ul class="sidebar-buttons">
      
  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://gaohaihang.gitee.io/ghhs_technology_blog/index.xml">
    
      <i class="sidebar-button-icon fa fa-lg fa-rss"></i>
      
      <span class="sidebar-button-desc">Rss</span>
    </a>
  </li>


    </ul>
  </div>
</nav>

      

      <div id="main" data-behavior="5"
        class="
               hasCoverMetaIn
               ">
        <article class="post" itemscope itemType="http://schema.org/BlogPosting">
          
          
            <div class="post-header main-content-wrap text-left">
  
    <h1 class="post-title" itemprop="headline">
      Tags plugins showcase
    </h1>
  
  
  <div class="postShorten-meta post-meta">
    
      <time itemprop="datePublished" datetime="2014-10-29T00:00:00Z">
        
  十月 29, 2014

      </time>
    
    
  </div>

</div>
          
          <div class="post-content markdown" itemprop="articleBody">
            <div class="main-content-wrap">
              <p>This post is used to show how tag plugins are displayed. See <a href="https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#tags">docs</a> for more info.</p>
<!-- raw HTML omitted -->
<h1 id="alert">Alert</h1>
<p>Read documentation to know how to use <a href="https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#alert">Alert tag</a></p>
<div class="alert info ">
  <p>Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.</p>
</div>
<div class="alert success ">
  <p>Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.</p>
</div>
<div class="alert warning ">
  <p>Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.</p>
</div>
<div class="alert danger ">
  <p>Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.</p>
</div>
<h1 id="block-quote">Block Quote</h1>
<p>Read documentation to know how to use <a href="https://hexo.io/docs/tag-plugins.html#Block_Quote">Block Quote tag</a></p>
<p><strong>Normal blockquote</strong></p>
<blockquote>
<p>Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.</p>
</blockquote>
<p><strong>Quote from a book</strong></p>
<blockquote>
  <p>
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
</p>
  <footer>
    <strong>David Levithan</strong>
    
      
        <cite>Wide Awake</cite>
      
    
  </footer>
</blockquote>
<p><strong>Quote from Twitter</strong></p>
<blockquote>
  <p>
NEW: DevDocs now comes with syntax highlighting. //devdocs.io
</p>
  <footer>
    <strong>@DevDocs</strong>
    
      
        <cite><a href="https://twitter.com/devdocs/status/356095192085962752" target="_blank" rel="external">https://twitter.com/devdocs/status/356095192085962752</a></cite>
      
    
  </footer>
</blockquote>
<p><strong>Quote from an article on the web</strong></p>
<blockquote>
  <p>
Every interaction is both precious and an opportunity to delight.
</p>
  <footer>
    <strong>Seth Godin</strong>
    
      <cite><a href="//sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html" target="_blank" rel="external">Welcome to Island Marketing</a></cite>
    
  </footer>
</blockquote>
<h1 id="code-block">Code Block</h1>
<p>Read documentation to know how to use <a href="https://hexo.io/docs/tag-plugins.html#Code_Block">Code Block tag</a></p>
<!-- raw HTML omitted -->
<p><strong>Normal code block</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">alert</span>(<span style="color:#e6db74">&#39;Hello World!&#39;</span>);
<span style="color:#a6e22e">alert</span>(<span style="color:#e6db74">&#39;Hello World!&#39;</span>);
</code></pre></div><p><strong>With caption</strong></p>

  
    
  
  
  
  


<figure class="highlight  language-">
  <figcaption>
    
      <span>Array.map</span>
    
  </figcaption>
  <table>
    <tbody>
      <tr>
        <td class="gutter">
          <pre><span class="line">1</span><br></pre>
        </td>
        <td class="code">
          <pre class="code-highlight language-"><code class="">array.map(callback[, thisArg])</code></pre>
        </td>
      </tr>
    </tbody>
  </table>
</figure>
<p><strong>With caption and URL</strong></p>

  
    
  
  
    
  
  
    
  
  
    
  


<figure class="highlight apacheconf language-apacheconf">
  <figcaption>
    
      <span>apache.conf</span><a href="http://underscorejs.org/#compact" target="_blank" rel="external">apache.conf</a>
    
  </figcaption>
  <table>
    <tbody>
      <tr>
        <td class="gutter">
          <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre>
        </td>
        <td class="code">
          <pre class="code-highlight language-apacheconf"><code class="apacheconf"># rewrite`s rules for wordpress pretty url
LoadModule rewrite_module  modules/mod_rewrite.so
RewriteCond %{REQUEST_FILENAME} !-f

&lt;Location /maps/&gt;
  RewriteMap map txt:map.txt
  RewriteMap lower int:tolower
  RewriteCond %{REQUEST_URI} ^/([^/.]&#43;)\.html$ [NC]
  RewriteCond ${map:${lower:%1}|NOT_FOUND} !NOT_FOUND
  RewriteRule .? /index.php?q=${map:${lower:%1}} [NC,L]
&lt;/Location&gt;</code></pre>
        </td>
      </tr>
    </tbody>
  </table>
</figure>
<h1 id="gist">Gist</h1>
<p>Read documentation to know how to use <a href="https://hexo.io/docs/tag-plugins.html#Gist">Gist tag</a></p>
<!-- raw HTML omitted -->
<script type="application/javascript" src="https://gist.github.com/imathis/996818.js"></script>

<h1 id="image">Image</h1>
<p>Read documentation to know how to use <a href="https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#image">Image tag</a></p>
<!-- raw HTML omitted -->
<p>

 
  
  
  
  
    
  
    
      
    
  

<div class="figure fig-100" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-15.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-15-750.jpg" >
  
    </a>
  
  
</div>



 
  
  
  
  
    
  
    
      
    
  
    
      
    
  

<div class="figure nocaption fig-50" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-4.jpg" title="Ferrari" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-4-375.jpg"  alt="Ferrari">
  
    </a>
  
  
</div>



 
  
  
  
  
    
  
    
      
    
  
    
      
    
  

<div class="figure nocaption fig-50" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-12.jpg" title="BMW i8 Concept" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-12-375.jpg"  alt="BMW i8 Concept">
  
    </a>
  
  
</div>



 
  
  
  
  
    
  
    
      
    
  
    
      
    
  

<div class="figure nocaption fig-33" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-14.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-14-250.jpg" >
  
    </a>
  
  
</div>



 
  
  
  
  
    
  
    
      
    
  
    
      
    
  

<div class="figure nocaption fig-33" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-9.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-9-250.jpg" >
  
    </a>
  
  
</div>



 
  
  
  
  
    
  
    
      
    
  
    
      
    
  

<div class="figure nocaption fig-33" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-2.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-2-250.jpg" >
  
    </a>
  
  
</div>



 
  
  
  
  
    
      
    
  
    
  
    
      
    
  

<div class="figure right fig-75" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-11.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-11-560.jpg" >
  
    </a>
  
  
</div>



 
  
  
  
  
    
      
    
  
    
  
    
      
    
  

<div class="figure right fig-25" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-8.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-8-185.jpg" >
  
    </a>
  
  
</div>



 
  
  
  
  
    
      
    
  
    
  
    
      
    
  

<div class="figure right fig-25" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-10.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-10-185.jpg" >
  
    </a>
  
  
</div>



 
  
  
  
  
    
      
    
  
    
  
    
      
    
  

<div class="figure right fig-25" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-5.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-5-185.jpg" >
  
    </a>
  
  
</div>



 
  
  
  
  
    
  
    
      
    
  

<div class="figure fig-50" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-13.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-13-375.jpg" >
  
    </a>
  
  
</div>



 
  
  
  
  
    
  
    
      
    
  

<div class="figure fig-25" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-17.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-17-185.jpg" >
  
    </a>
  
  
</div>



 
  
  
  
  
    
  
    
      
    
  

<div class="figure fig-25" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-18.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-18-185.jpg" >
  
    </a>
  
  
</div>



 
  
  
  
  
    
  
    
      
    
  

<div class="figure fig-25" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-19.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-19-185.jpg" >
  
    </a>
  
  
</div>


 
  
  
  
  
    
  
    
      
    
  
    
      
    
  

 
  
  
  
  
    
  
    
      
    
  

<div class="figure fig-25" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-20.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-20-185.jpg" >
  
    </a>
  
  
</div>

  <div style="clear:both;"></div>



 
  
  
  
  
    
  
    
      
    
  

<div class="figure fig-25" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-21.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-21-185.jpg" >
  
    </a>
  
  
</div>



 
  
  
  
  
    
  
    
      
    
  

<div class="figure fig-25" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-22.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-22-185.jpg" >
  
    </a>
  
  
</div>



 
  
  
  
  
    
  
    
      
    
  

<div class="figure fig-25" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-23.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-23-185.jpg" >
  
    </a>
  
  
</div>


 
  
  
  
  
    
  
    
      
    
  
    
      
    
  

 
  
  
  
  
    
  
    
      
    
  

<div class="figure fig-25" >
  
    <a class="fancybox" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-24.jpg" data-fancybox-group="">
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-24-185.jpg" >
  
    </a>
  
  
</div>

  <div style="clear:both;"></div>




<div class="figure fig-20" >
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-25-150.jpg" >
  
  
</div>




<div class="figure fig-20" >
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-26-150.jpg" >
  
  
</div>




<div class="figure fig-20" >
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-27-150.jpg" >
  
  
</div>




<div class="figure fig-20" >
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-28-150.jpg" >
  
  
</div>


 
  
  
  
  
    
  
    
      
    
  


<div class="figure fig-20" >
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-29-150.jpg" >
  
  
</div>

  <div style="clear:both;"></div>




<div class="figure fig-20" >
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-35-150.jpg" >
  
  
</div>




<div class="figure fig-20" >
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-30-150.jpg" >
  
  
</div>




<div class="figure fig-20" >
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-31-150.jpg" >
  
  
</div>




<div class="figure fig-20" >
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-32-150.jpg" >
  
  
</div>


 
  
  
  
  
    
  
    
      
    
  


<div class="figure fig-20" >
  
    <img class="fig-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-34-150.jpg" >
  
  
</div>

  <div style="clear:both;"></div>
</p>
<h1 id="jsfiddle">jsFiddle</h1>
<p>Read documentation to know how to use <a href="https://hexo.io/docs/tag-plugins.html#jsFiddle">jsFiddle tag</a></p>
<!-- raw HTML omitted -->
<iframe scrolling="no" width="100%" height="300" src="//jsfiddle.net/ccWP7/embedded/js,resources,html,css,result/light" frameborder="0" allowfullscreen=""></iframe>
<h1 id="pull-quote">Pull Quote</h1>
<p>Read documentation to know how to use <a href="https://hexo.io/docs/tag-plugins.html#Pull_Quote">Pull Quote tag</a></p>
<p>Donec non tempus arcu.
Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis.
<blockquote class="pullquote left">
	<p>
Here is a pullquote left. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et
fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac.
<blockquote class="pullquote right">
	<p>
Here is a pullquote right. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</blockquote>
Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Duis vel mauris nulla.
Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero.
Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula,
dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.</p>
<h1 id="highlight-text">Highlight text</h1>
<p>Read documentation to know how to use <a href="https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#highlight-text">Highlight text tag</a></p>
<!-- raw HTML omitted -->
<h1 id="tabbed-code-block">Tabbed code block</h1>
<p>Read documentation to know how to use <a href="https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#tabbed-code-block">Tabbed code block</a></p>
<!-- raw HTML omitted -->


  
  
  
  
  

  
  
  
  
  

  
  
  
  
  


  
    
  
  

<figure class="codeblock codeblock--tabbed">
  <figcaption>
    
      <span>tabbed_codeblock</span>
    
    <ul class="tabs">
      
        <li class="tab active">js</li>
      
        <li class="tab ">css</li>
      
        <li class="tab ">html</li>
      
    </ul>
  </figcaption> 
  <div class="tabs-content">
    
      
      <figure class="highlight language-js" style="display: block;">   
        <table>
          <tbody>
            <tr>
              <td class="gutter">
                <pre><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br></pre>
              </td>
              <td class="code">
                <pre class="code-highlight language-js"><code class="js">function $initHighlight(block, flags) {
  try {
    if (block.className.search(/\bno\-highlight\b/) != -1)
      return processBlock(block.function, true, 0x0F) &#43; &#39; class=&#34;&#34;&#39;;
  } catch (e) {
    /* handle exception */
    var e4x =
        &lt;div&gt;Example
            &lt;p&gt;1234&lt;/p&gt;&lt;/div&gt;;
  }
  for (var i = 0 / 2; i &lt; classes.length; i&#43;&#43;) { // &#34;0 / 2&#34; should not be parsed as regexp
    if (checkCondition(classes[i]) === undefined)
      return /\d&#43;[\s/]/g;
  }
  console.log(Array.every(classes, Boolean));
}</code></pre>
              </td>
            </tr>
          </tbody>
        </table>
      </figure>
    
      
      <figure class="highlight language-css" style="display: none;">   
        <table>
          <tbody>
            <tr>
              <td class="gutter">
                <pre><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br><span>25</span><br></pre>
              </td>
              <td class="code">
                <pre class="code-highlight language-css"><code class="css">@media screen and (-webkit-min-device-pixel-ratio: 0) {
  body:first-of-type pre::after {
    content: &#39;highlight: &#39; attr(class);
  }
  body {
    background: linear-gradient(45deg, blue, red);
  }
}

@import url(&#39;print.css&#39;);
@page:right {
 margin: 1cm 2cm 1.3cm 4cm;
}

@font-face {
  font-family: Chunkfive; src: url(&#39;Chunkfive.otf&#39;);
}

div.text,
#content,
li[lang=ru] {
  font: Tahoma, Chunkfive, sans-serif;
  background: url(&#39;hatch.png&#39;) /* wtf? */;  color: #F0F0F0 !important;
  width: 100%;
}</code></pre>
              </td>
            </tr>
          </tbody>
        </table>
      </figure>
    
      
      <figure class="highlight language-html" style="display: none;">   
        <table>
          <tbody>
            <tr>
              <td class="gutter">
                <pre><span>1</span><br><span>2</span><br><span>3</span><br><span>4</span><br><span>5</span><br><span>6</span><br><span>7</span><br><span>8</span><br><span>9</span><br><span>10</span><br><span>11</span><br><span>12</span><br><span>13</span><br><span>14</span><br><span>15</span><br><span>16</span><br><span>17</span><br><span>18</span><br><span>19</span><br><span>20</span><br><span>21</span><br><span>22</span><br><span>23</span><br><span>24</span><br></pre>
              </td>
              <td class="code">
                <pre class="code-highlight language-html"><code class="html">&lt;?xml version=&#34;1.0&#34;?&gt;
&lt;response value=&#34;ok&#34; xml:lang=&#34;en&#34;&gt;
  &lt;text&gt;Ok&lt;/text&gt;
  &lt;comment html_allowed=&#34;true&#34;/&gt;
  &lt;ns1:description&gt;&lt;![CDATA[
  CDATA is &lt;not&gt; magical.
  ]]&gt;&lt;/ns1:description&gt;
  &lt;a&gt;&lt;/a&gt; &lt;a/&gt;
&lt;/response&gt;


&lt;!DOCTYPE html&gt;
&lt;title&gt;Title&lt;/title&gt;

&lt;style&gt;body {width: 500px;}&lt;/style&gt;

&lt;script type=&#34;application/javascript&#34;&gt;
  function $init() {return true;}
&lt;/script&gt;

&lt;body&gt;
  &lt;p checked class=&#34;title&#34; id=&#39;title&#39;&gt;Title&lt;/p&gt;
  &lt;!-- here goes the rest of the page --&gt;
&lt;/body&gt;</code></pre>
              </td>
            </tr>
          </tbody>
        </table>
      </figure>
    
  </div>
</figure>
<h1 id="youtube">Youtube</h1>
<p>Read documentation to know how to use <a href="https://hexo.io/docs/tag-plugins.html#YouTube">Youtube tag</a></p>
<!-- raw HTML omitted -->

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="https://www.youtube.com/embed/BSVkI3Ds8E" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
</div>

<h1 id="vimeo">Vimeo</h1>
<p>Read documentation to know how to use <a href="https://hexo.io/docs/tag-plugins.html#Vimeo">Vimeo tag</a></p>
<!-- raw HTML omitted -->

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="https://player.vimeo.com/video/147585091" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="vimeo video" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 </div>

<h1 id="wide-image">Wide image</h1>
<p>Read documentation to know how to use <a href="https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#wide-image">Wide image tag</a></p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
<!-- raw HTML omitted -->
</div>
<div class="figure figure--fullWidth">
  <img class="figure-img" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-1.jpg" alt="Mercedes SLS" /><span class="caption">Mercedes SLS</span>
</div>
<div class="main-content-wrap">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
              
            </div>
          </div>
          <div id="post-footer" class="post-footer main-content-wrap">
            
              
                
                
                  <div class="post-footer-tags">
                    <span class="text-color-light text-small">标签</span><br/>
                    
  <a class="tag tag--primary tag--small" href="https://gaohaihang.gitee.io/ghhs_technology_blog/tags/tag-plugins/">tag plugins</a>

  <a class="tag tag--primary tag--small" href="https://gaohaihang.gitee.io/ghhs_technology_blog/tags/test/">test</a>

                  </div>
                
              
            
            <div class="post-actions-wrap">
  
      <nav >
        <ul class="post-actions post-action-nav">
          
            <li class="post-action">
              
                <a class="post-action-btn btn btn--default tooltip--top" href="https://gaohaihang.gitee.io/ghhs_technology_blog/2015/03/highlighted-code-showcase/" data-tooltip="highlighted code showcase">
              
                  <i class="fa fa-angle-left"></i>
                  <span class="hide-xs hide-sm text-small icon-ml">下一篇</span>
                </a>
            </li>
            <li class="post-action">
              
                <a class="post-action-btn btn btn--default tooltip--top" href="https://gaohaihang.gitee.io/ghhs_technology_blog/2014/08/hidden-social-section-showcase/" data-tooltip="Hidden social section showcase">
              
                  <span class="hide-xs hide-sm text-small icon-mr">上一篇</span>
                  <i class="fa fa-angle-right"></i>
                </a>
            </li>
          
        </ul>
      </nav>
    <ul class="post-actions post-action-share" >
      
        <li class="post-action hide-lg hide-md hide-sm">
          <a class="post-action-btn btn btn--default btn-open-shareoptions" href="#btn-open-shareoptions">
            <i class="fa fa-share-alt"></i>
          </a>
        </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://www.facebook.com/sharer/sharer.php?u=https://gaohaihang.gitee.io/ghhs_technology_blog/2014/10/tags-plugins-showcase/">
              <i class="fa fa-facebook-official"></i>
            </a>
          </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://twitter.com/intent/tweet?text=https://gaohaihang.gitee.io/ghhs_technology_blog/2014/10/tags-plugins-showcase/">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://plus.google.com/share?url=https://gaohaihang.gitee.io/ghhs_technology_blog/2014/10/tags-plugins-showcase/">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
        
      
      
        <li class="post-action">
          <a class="post-action-btn btn btn--default" href="#disqus_thread">
            <i class="fa fa-comment-o"></i>
          </a>
        </li>
      
      <li class="post-action">
        
          <a class="post-action-btn btn btn--default" href="#">
        
          <i class="fa fa-list"></i>
        </a>
      </li>
    </ul>
  
</div>

            
              
                <div id="disqus_thread">
  <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
              
            
          </div>
        </article>
        <footer id="footer" class="main-content-wrap">
  <span class="copyrights">
    &copy; 2020 唐宋缘明卿. All Rights Reserved
  </span>
</footer>

      </div>
      <div id="bottom-bar" class="post-bottom-bar" data-behavior="5">
        <div class="post-actions-wrap">
  
      <nav >
        <ul class="post-actions post-action-nav">
          
            <li class="post-action">
              
                <a class="post-action-btn btn btn--default tooltip--top" href="https://gaohaihang.gitee.io/ghhs_technology_blog/2015/03/highlighted-code-showcase/" data-tooltip="highlighted code showcase">
              
                  <i class="fa fa-angle-left"></i>
                  <span class="hide-xs hide-sm text-small icon-ml">下一篇</span>
                </a>
            </li>
            <li class="post-action">
              
                <a class="post-action-btn btn btn--default tooltip--top" href="https://gaohaihang.gitee.io/ghhs_technology_blog/2014/08/hidden-social-section-showcase/" data-tooltip="Hidden social section showcase">
              
                  <span class="hide-xs hide-sm text-small icon-mr">上一篇</span>
                  <i class="fa fa-angle-right"></i>
                </a>
            </li>
          
        </ul>
      </nav>
    <ul class="post-actions post-action-share" >
      
        <li class="post-action hide-lg hide-md hide-sm">
          <a class="post-action-btn btn btn--default btn-open-shareoptions" href="#btn-open-shareoptions">
            <i class="fa fa-share-alt"></i>
          </a>
        </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://www.facebook.com/sharer/sharer.php?u=https://gaohaihang.gitee.io/ghhs_technology_blog/2014/10/tags-plugins-showcase/">
              <i class="fa fa-facebook-official"></i>
            </a>
          </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://twitter.com/intent/tweet?text=https://gaohaihang.gitee.io/ghhs_technology_blog/2014/10/tags-plugins-showcase/">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://plus.google.com/share?url=https://gaohaihang.gitee.io/ghhs_technology_blog/2014/10/tags-plugins-showcase/">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
        
      
      
        <li class="post-action">
          <a class="post-action-btn btn btn--default" href="#disqus_thread">
            <i class="fa fa-comment-o"></i>
          </a>
        </li>
      
      <li class="post-action">
        
          <a class="post-action-btn btn btn--default" href="#">
        
          <i class="fa fa-list"></i>
        </a>
      </li>
    </ul>
  
</div>

      </div>
      <div id="share-options-bar" class="share-options-bar" data-behavior="5">
  <i id="btn-close-shareoptions" class="fa fa-close"></i>
  <ul class="share-options">
    
      <li class="share-option">
        <a class="share-option-btn" target="new" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fgaohaihang.gitee.io%2Fghhs_technology_blog%2F2014%2F10%2Ftags-plugins-showcase%2F">
          <i class="fa fa-facebook-official"></i><span>分享到 Facebook</span>
        </a>
      </li>
    
      <li class="share-option">
        <a class="share-option-btn" target="new" href="https://twitter.com/intent/tweet?text=https%3A%2F%2Fgaohaihang.gitee.io%2Fghhs_technology_blog%2F2014%2F10%2Ftags-plugins-showcase%2F">
          <i class="fa fa-twitter"></i><span>分享到 Twitter</span>
        </a>
      </li>
    
      <li class="share-option">
        <a class="share-option-btn" target="new" href="https://plus.google.com/share?url=https%3A%2F%2Fgaohaihang.gitee.io%2Fghhs_technology_blog%2F2014%2F10%2Ftags-plugins-showcase%2F">
          <i class="fa fa-google-plus"></i><span>分享到 Google&#43;</span>
        </a>
      </li>
    
  </ul>
</div>
<div id="share-options-mask" class="share-options-mask"></div>
    </div>
    
    <div id="about">
  <div id="about-card">
    <div id="about-btn-close">
      <i class="fa fa-remove"></i>
    </div>
    
      <img id="about-card-picture" src="http://img.qq22.com.cn/uploads/4134/gubtyqxfhz2.jpg?68513786" alt="作者的图片" />
    
    <h4 id="about-card-name">唐宋缘明卿</h4>
    
      <div id="about-card-bio">弱小的人，才习惯嘲讽与否定；内心强大的人，从不吝啬赞美与鼓励。</div>
    
    
      <div id="about-card-job">
        <i class="fa fa-briefcase"></i>
        <br/>
        python全栈工程师
      </div>
    
    
      <div id="about-card-location">
        <i class="fa fa-map-marker"></i>
        <br/>
        中国 北京
      </div>
    
  </div>
</div>

    

    
  
    
      <div id="cover" style="background-image:url('https://gaohaihang.gitee.io/ghhs_technology_blog/images/cover.jpg');"></div>
    
  


    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.7/js/jquery.fancybox.min.js" integrity="sha256-GEAnjcTqVP+vBp3SSc8bEDQqvWAZMiHyUSIorrWwH50=" crossorigin="anonymous"></script>


<script src="https://gaohaihang.gitee.io/ghhs_technology_blog/js/script-pcw6v3xilnxydl1vddzazdverrnn9ctynvnxgwho987mfyqkuylcb1nlt.min.js"></script>


<script lang="javascript">
window.onload = updateMinWidth;
window.onresize = updateMinWidth;
document.getElementById("sidebar").addEventListener("transitionend", updateMinWidth);
function updateMinWidth() {
  var sidebar = document.getElementById("sidebar");
  var main = document.getElementById("main");
  main.style.minWidth = "";
  var w1 = getComputedStyle(main).getPropertyValue("min-width");
  var w2 = getComputedStyle(sidebar).getPropertyValue("width");
  var w3 = getComputedStyle(sidebar).getPropertyValue("left");
  main.style.minWidth = `calc(${w1} - ${w2} - ${w3})`;
}
</script>

<script>
$(document).ready(function() {
  hljs.configure({ classPrefix: '', useBR: false });
  $('pre.code-highlight > code, pre > code').each(function(i, block) {
    if (!$(this).hasClass('codeblock')) {
      $(this).addClass('codeblock');
    }
    hljs.highlightBlock(block);
  });
});
</script>


  
    
      <script>
        var disqus_config = function () {
          this.page.url = 'https:\/\/gaohaihang.gitee.io\/ghhs_technology_blog\/2014\/10\/tags-plugins-showcase\/';
          
            this.page.identifier = '\/2014\/10\/tags-plugins-showcase\/'
          
        };
        (function() {
          
          
          if (window.location.hostname == "localhost") {
            return;
          }
          var d = document, s = d.createElement('script');
          var disqus_shortname = 'hugo-tranquilpeak-theme';
          s.src = '//' + disqus_shortname + '.disqus.com/embed.js';

          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
        })();
      </script>
    
  




    
  </body>
</html>

